<template>
  <div class="search">
    <div class="type">
      <p class="title">{{ types[type_idx] }}</p>
      <i class="el-icon-caret-bottom"></i>
      <ul class="title-list">
        <li @click="type_idx = idx" v-for="(item, idx) in types" :key="idx">
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="text">
      <input type="text" placeholder="输入关键词搜索" />
      <i class="el-icon-camera-solid"></i>
    </div>
    <div class="search-btn">
      <i class="el-icon-search"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      types: ["图片类型", "摄影图片", "矢量图库", "热门精选", "高端PLUS"],
      type_idx: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
$searHeight: 70px;
.search {
  display: flex;
  width: 800px;
  height: $searHeight;
  background-color: rgba(255, 255, 255, 0.8);
  align-items: stretch;
  .type {
    position: relative;
    width: 140px;
    flex-shrink: 0;
    height: 100%;
    line-height: $searHeight;
    text-align: center;
    cursor: pointer;
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      right: 0;
      width: 1px;
      transform: translateY(-50%);
      height: 80%;
      background-color: #000;
    }
    &:hover {
      .title-list {
        visibility: visible;
        opacity: 1;
      }
    }
    .title {
      font-size: 20px;
    }
    i {
      position: absolute;
      right: 2%;
      top: 25%;
      font-size: 30px;
    }
    .title-list {
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s;
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      li {
        font-size: 14px;
        line-height: 34px;
        height: 34px;
        &:hover {
          color: #fff;
          background-color: $mainColor;
        }
      }
    }
  }
  .text {
    flex: 1;
    display: flex;
    align-items: center;
    input {
      flex: 1;
      line-height: $searHeight;
      outline: none;
      border: none;
      background-color: transparent;
      font-size: 20px;
      padding: 0 20px;
    }
    i {
      font-size: 38px;
      cursor: pointer;
      margin-right: 30px;
    }
  }
  .search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    flex-shrink: 0;
    background-color: $mainColor;
    cursor: pointer;
    i {
      font-size: 50px;
      color: #fff;
    }
    transition: all 0.2s;
    &:hover {
      background-color: #42ab9e;
    }
  }
}
</style>
